import { Button,Typography } from 'antd';
import 'antd/dist/antd.less';
import {DribbbleOutlined, SearchOutlined} from '@ant-design/icons';
import {useState} from 'react';

const { Text, Link } = Typography;
const { Paragraph } = Typography;

export default function Antd(){
    //创建状态
    const [editableStr, setEditableStr] = useState('憧憬是距离理解最遥远的感情');

    return <div style={{padding: '50px'}}>
        <h3>按钮</h3>
        <Button>测试按钮</Button>
        <Button danger>危险按钮</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="primary" icon={<SearchOutlined />}>
            Search
        </Button>
        <h3>图标</h3>
        <DribbbleOutlined style={{fontSize: '40px', color: '#aef'}} />

        <h3>排版</h3>
        <Text type="success">恭喜恭喜, 特等奖 !</Text>
        <p>你可以使用 <Text keyboard>ctrl + c</Text> 来复制内容</p>
        <Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
        <Paragraph copyable>This is a copyable text.</Paragraph>
    </div>
}